<template>
    <div v-if="store.auth.role=='学生'"><el-button type="success" @click="dialogVisible=true">留级申请</el-button></div>
    <div>
        <el-form  v-model="info">
            <div class="updateInfo">
                <div class="left">
                    <el-form-item label="账号" >
                        <el-input v-model="info.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="info.age"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio-group  v-model="radio1" class="ml-4">
                            <el-radio label="1">男</el-radio>
                            <el-radio label="2">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="民族">
                        <el-input v-model="info.nation" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                        <el-input type="email" v-model="info.email"></el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submit">提 交</el-button>
            <el-dialog title="留级申请" v-model="dialogVisible">
        <el-form :model="stuss">
            <el-input placeholder="学号" v-model="stuss.stuid" type="text" />
            <el-input placeholder="姓名" v-model="stuss.stuname" type="text" />
            <el-input placeholder="学院" v-model="stuss.stucollege" type="text" />
            <el-input placeholder="专业" v-model="stuss.stumajor" type="text" />
            <el-input placeholder="所在学期" v-model="stuss.term" type="text" />
            <el-input placeholder="留级原因" v-model="stuss.detail" type="textarea" resize="none" :rows="3" />
            <el-button type="warning" @click="dialogVisible=false">取消</el-button>
            <el-button type="primary" @click="send">发送</el-button>
        </el-form>
    </el-dialog>
  </span>
    </div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import { get,post } from '@/utils/request.js'
import {ElMessage} from 'element-plus'
import { reactive } from 'vue'
import {userStore} from '@/stores/counter.js'
const store=userStore()

const dialogVisible=ref(false)
const radio1=ref('1')
const info = reactive({
  username: '',
  age:'',
  email:'',
  nation:''
})

const stuss = reactive({
stuid:'',
stuname:'',
stucollege:'',
stumajor:'',
term:'',
detail:''
})

onMounted(async () => {
    get('/getInfo',(message)=>{
    info.username = message.name
    info.email = message.email
    info.age=message.age
    info.nation=message.nation
    radio1.value=message.sex
    },(message)=>{
    ElMessage.warning(message);
    })
})

const submit=()=>{
post('/updateinfo',{
  username: info.username,
  email: info.email,
  age: info.age,
  sex:radio1.value
},(message)=>{
ElMessage.success(message)
},(data)=>{
ElMessage.warning(data)
})
}

const send=()=>{
post('/repetition/apply',{
  id: stuss.stuid,
  name: stuss.stuname,
  college: stuss.stucollege,
  major:stuss.stumajor,
  term:stuss.term,
  detail:stuss.detail
},(message)=>{
ElMessage.success(message)
},(data)=>{
ElMessage.warning(data)
})
}
</script>
<style scoped>
</style>